<template>
  <div class="chart-wrapper">
    <v-chart :option="chartOptions" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import VChart from 'vue-echarts';

// 定义props
const props = defineProps({
  chartId: {
    type: String,
    required: true
  },
  options: {
    type: Object,
    default: () => ({})
  }
});

// 图表配置
const chartOptions = ref({
  title: {
    text: '面积图'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: {}
    }
  ]
});

// 将传入的options合并到默认配置
watch(() => props.options, (newOptions) => {
  if (newOptions) {
    Object.assign(chartOptions.value, newOptions);
  }
}, { immediate: true });
</script>

<style scoped>
.chart-wrapper {
  width: 100%;
  height: 100%;
}
</style> 